$icon-font-path: "../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower
$button-width: 40px; // The width of the button area
$button-height: 40px; // The height of the button area
$bar-thickness: 2px; // The thickness of the button bars
$button-pad: 5px; // The left/right padding between button area and bars.
$button-bar-space: 3px; // The spacing between button bars
$button-transistion-duration: 0.3s; // The transition duration
$transition-time: 0.58s;
@font-face {
  font-family: 'Lantinghei Light';
  src: url("../fonts/lantingxihei.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lantinghei SC';
  src: url("../fonts/FZLTHJW.TTF") format('truetype');
  font-weight: normal;
  font-style: normal;
}

/** Global Styles **/
html,
body,
.wrap {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
  background-color: #333;
  -webkit-font-smoothing: antialiased;
}
#logo,
#logo img {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}
hr {
  max-width: 50px;
  border-color: #f05f40;
  border-width: 2px;
  &.light {
    border-color: #fff;
  }
  &.dark {
    border-color: #333;
  }
}
hr a {
  color: #f05f40;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
a:hover,
a:focus {
  color: #eb3812;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 4px;
  font-family: "Lantinghei Light", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}
p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}
.bg-primary {
  background-color: #f05f40;
}
.bg-dark {
  color: #fff;
  background-color: #222;
}
.text-faded {
  color: rgba(255,255,255,.7);
}
section {
  padding: 70px 0;
  overflow: hidden;
}
aside {
  padding: 50px 0;
}
.no-padding {
  padding: 0;
}
.btn {
  border: 0;
  border-radius: 201px;
  text-transform: uppercase;
  font-weight: 100;
}
.btn-xl {
  padding: 10px 15px;
}
.btn-primary {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

/** hamburger button **/
.c-hamburger {
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: $button-width;
  height: $button-width;
  font-size: 0;
  text-indent: -9999px;
  z-index: 999;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  opacity: 1 !important;
  -webkit-transition: right $transition-time ease-in-out;
  -moz-transition: right $transition-time ease-in-out;
  -o-transition: right $transition-time ease-in-out;
  transition: right $transition-time ease-in-out;
}
.c-hamburger span {
  display: block;
  position: absolute;
  top: 22px;
  left: $button-pad;
  right: $button-pad;
  height: $bar-thickness;
  background: #fff;
  opacity: 0.8;
}
.c-hamburger:focus {
  outline: none;
}
.c-hamburger span::after,
.c-hamburger span::before {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: $bar-thickness;
  background-color: #fff;
  opacity: 0.8;
  content: "";
}
.c-hamburger--htla.is-active span::after,
.c-hamburger--htla.is-active span::before,
.c-hamburger--htra.is-active span::after,
.c-hamburger--htra.is-active span::before {
  width: 50%;
}
.c-hamburger span::before {
  top: -9px;
}
.c-hamburger span::after {
  bottom: -9px;
}
.c-hamburger--htx {
  background-color: transparent;
}
.c-hamburger--htx span {
  transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
  transition-property: top, transform;
}
.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {

  // background-color: #cb0032;
  right: 221px;
}
.c-hamburger--htx.is-active span {
  background: none;
}
.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}
.sider {
  position: fixed;
  right: -15.625em;
  /*left or right and the width of your navigation panel*/
  width: 15.625em;
  /*should match the above value*/
  z-index: 100;
}

/** HEADER STYLE **/
header {
  position: relative;
  width: 100%;
  min-height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;

  // background-image: url("../images/header.jpg");
  // background-position: center;
  // -webkit-background-size: cover;
  // -moz-background-size: cover;
  // background-size: cover;
  // -o-background-size: cover;
  #myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

    // opacity: 0.618;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: contain;
  }
  .layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.618);
    background-repeat: repeat;
    background-position: center center;
    background-image: url("../images/pattern.png");
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    &.mobile {
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  }
  .header-content {
    position: absolute;
    top: 50%;
    padding: 0 50px;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    .header-content-inner {
      margin-right: auto;
      margin-left: auto;
      h1 {
        margin-top: 0;
        margin-bottom: 0;
        text-transform: uppercase;
        font-weight: 100;
        text-shadow: 0 1px 1px #333;
        font-size: 30px;
        letter-spacing: 0;
      }
      hr {
        margin: 30px auto;
      }
      p {
        margin-bottom: 50px;
        font-size: 16px;
        font-weight: 300;
        color: rgba(255,255,255,.95);
        text-shadow: 0 1px 1px #333;
      }
    }
  }
  #mobile-logo {
    padding: 60px 0;
    img {
      width: 100px;
      margin-bottom: 50px;
      opacity: .8;
    }
    .j_next {
      position: absolute;
      left: 50%;
      bottom: 10px;
      margin-left: -28px;
    }
    .arr_down_icon {
      display: inline-block;
      padding-top: 15px;
      -webkit-animation: 'down_animation' 1.4s linear infinite alternate;
      background: url("../images/down_ico.png") no-repeat center top;
      background-size: 22px auto;
    }
    .btn {
      position: absolute;
      bottom: 80px;
      left: 50%;
      margin-left: -50px;
    }
    h1 {
      letter-spacing: 3px;
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 28px;
      opacity: 0.8;
    }
    p {
      letter-spacing: 4px;
      font-size: 15px;
      opacity: 0.8;
    }
  }
}
section {
  p {
    letter-spacing: 0;
    font-size: 12px;
  }
  h2 {
    font-size: 20px;
  }
  &.bg-pink {
    background-color: #d2003e;
    background-image: url('');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e20043), color-stop(30%, #dc0041), color-stop(70%, #c6003b), color-stop(100%, #b90037));
    background-image: -moz-linear-gradient(#e20043, #dc0041 30%, #c6003b 70%, #b90037);
    background-image: -webkit-linear-gradient(#e20043, #dc0041 30%, #c6003b 70%, #b90037);
    background-image: linear-gradient(#e20043, #dc0041 30%, #c6003b 70%, #b90037);
    color: #fff;
  }
  &.bg-blue {
    background-color: #00a0e9;
    background-image: url('');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #009de4), color-stop(30%, #0098dd), color-stop(100%, #0084c0));
    background-image: -moz-linear-gradient(#009de4, #0098dd 30%, #0084c0);
    background-image: -webkit-linear-gradient(#009de4, #0098dd 30%, #0084c0);
    background-image: linear-gradient(#009de4, #0098dd 30%, #0084c0);
    color: #fff;
    padding-bottom: 0;
    .section-img-2-left {
      position: absolute;
      left: 20%;
      top: 30%;
      z-index: 1;
    }
    .section-img-2-center {
      position: relative;
      left: 5%;
      top: 2%;
      z-index: 2;
    }
    .section-img-2-right {
      position: absolute;
      left: 60%;
      bottom: -10%;
      z-index: 3;
    }
    .section-img-2-icon {
      position: absolute;
      left: 60%;
      bottom: -5%;
      z-index: 4;
    }
  }
  &.bg-yellow {
    background-color: #fff100;
    color: #444;
    padding-bottom: 0 !important;
    p {
      color: #444;
    }
    .section-img {
      padding-top: 0 !important;
    }
  }
  &.bg-black {
    background-color: #211f24;
    background-image: url('');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #38363a), color-stop(30%, #38363a), color-stop(70%, #232126), color-stop(100%, #211f24));
    background-image: -moz-linear-gradient(#38363a, #38363a 30%, #232126 70%, #211f24);
    background-image: -webkit-linear-gradient(#38363a, #38363a 30%, #232126 70%, #211f24);
    background-image: linear-gradient(#38363a, #38363a 30%, #232126 70%, #211f24);
    color: #fff;
    padding-bottom: 0 !important;
    img {
      &.img-center {
        -webkit-transform: translateX(27px);
        -moz-transform: translateX(27px);
        -o-transform: translateX(27px);
        transform: translateX(27px);
        z-index: 5;
      }
      &.img-left {
        position: absolute;
        left: 50%;
        top: 57%;
        margin-left: -550px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      &.img-right {
        position: absolute;
        right: 50%;
        top: 57%;
        margin-right: -550px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
  }
  &.bg-light {
    background-color: #d2003e;
    background-image: none;
    color: #fff;
    padding: 40px 0;
    p {
      color: #444 !important;
    }
  }
}
footer {
  background-color: #fff;
  color: #666;
  padding: 10px;
  border: 1px solid #f2f2f2;
}
.section-heading {
  margin-top: 0;
  font-weight: 100;
}
.section-img {
  padding-top: 40px;
  text-align: center;
  img {
    margin: 0 auto;
  }
}
@media(min-width:768px) {
  header {
    min-height: 100%;
    .header-content {
      position: absolute;
      top: 50%;
      padding: 0 50px;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
        h1 {
          font-size: 62px;
          letter-spacing: 10px;
        }
        p {
          margin-right: auto;
          margin-left: auto;
          max-width: 80%;
          margin-bottom: 60px;
          font-size: 22px;
          letter-spacing: 14px;
        }
      }
    }
    .btn {
      border: 0;
      border-radius: 201px;
      text-transform: uppercase;
      font-weight: 100;
    }
    .btn-xl {
      padding: 15px 35px;
      font-size: 20px;
    }
  }
  section {
    p {
      letter-spacing: 2px;
      font-size: 16px;
    }
    .text-faded {
      color: rgba(255,255,255,.7);
    }
    h2 {
      font-size: 40px;
    }
    &.bg-pink {

    }
    &.bg-blue {
      padding-bottom: 40px;
      .section-img-2-left {
        position: absolute;
        left: 20%;
        top: 30%;
        z-index: 1;
      }
      .section-img-2-center {
        position: relative;
        left: 5%;
        top: 2%;
        z-index: 2;
      }
      .section-img-2-right {
        position: absolute;
        left: 60%;
        bottom: -10%;
        z-index: 3;
      }
      .section-img-2-icon {
        position: absolute;
        left: 60%;
        bottom: -5%;
        z-index: 4;
      }
    }
    &.bg-yellow {
      p {
        color: #444;
      }
      .section-img {
        padding-top: 0 !important;
      }
    }
    &.bg-black {
      img {
        &.img-center {
          -webkit-transform: translateX(27px);
          -moz-transform: translateX(27px);
          -o-transform: translateX(27px);
          transform: translateX(27px);
          z-index: 5;
        }
        &.img-left {
          position: absolute;
          left: 50%;
          top: 57%;
          margin-left: -550px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        &.img-right {
          position: absolute;
          right: 50%;
          top: 57%;
          margin-right: -550px;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    &.bg-light {
      background-color: #fff;
      background-image: none;
      color: #444;
      padding-bottom: 40px !important;
      p {
        color: #444;
      }
    }
  }
}
@media(min-width:1600px) {
  section {
    padding: 100px 0;
  }
}
/***************** Slide Out Widget Are ******************/
#slide-out-widget-area {
  position: fixed;
  transform: translateX(201px);
  -webkit-transform: translateX(201px);
  -o-transform: translateX(201px);
  -ms-transform: translateX(201px);
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  z-index: 1000000;
  background-color: #030303;
  padding: 0;
  overflow: hidden;
  z-index: 5;
  -webkit-transition: all $transition-time ease-in-out;
  -moz-transition: all $transition-time ease-in-out;
  -o-transition: all $transition-time ease-in-out;
  transition: all $transition-time ease-in-out;
  .nav {
    background-color: #0e0e0e;
    li {
      font-size: 14px !important;
      letter-spacing: 1px;
      a {
        color: rgba(252, 252, 252, 0.49);
        padding: 25px 40px;
        border-bottom: 1px solid rgba(252, 252, 252, 0.06);
        background-color: #0e0e0e;
        position: relative;
        -webkit-transition: all 0.3s ease 0.1s;
        -moz-transition: all 0.3s ease 0.1s;
        -o-transition: all 0.3s ease 0.1s;
        -ms-transition: all 0.3s ease 0.1s;
        transition: all 0.3s ease 0.1s;
        &:after {
          -webkit-transition: all 0.3s ease 0.1s;
          -moz-transition: all 0.3s ease 0.1s;
          -o-transition: all 0.3s ease 0.1s;
          -ms-transition: all 0.3s ease 0.1s;
          transition: all 0.3s ease 0.1s;
        }
        &:hover {
          color: rgba(255, 255, 255, 1) !important;
          background-color: #030303;
          padding-left: 84px;
        }
      }
    }
  }
  .widget {
    margin-bottom: 0;
    &.widget_text {
      padding: 40px;
      .textwidget {
        letter-spacing: 1px;
        p {
          font-size: 14px;
          margin-top: 0;
          padding-bottom: 0;
          color: #eee;
        }
        h3 {
          color: #eee;
          font-size: 14px;
        }
      }
      ul.contact-info {
        font-size: 14px;
        line-height: 1.6;
        margin-top: 40px;
        padding-left: 0;
        list-style: none;
        letter-spacing: 1px;
        li {
          margin-bottom: 10px;
          a {
            color: #929292;
            padding: 10px;
            display: block;
            font-size: 12px;
            &:hover {
              color: #fcfcfc !important;
              text-decoration: none;
            }
          }
          span {
            padding-right: 6px;
            display: inline-block;
            color: #fcfcfc;
            font-size: 12px;
          }
        }
      }
    }
    &.text-2 {
      padding-top: 0 !important;
      h3 {
        color: #fcfcfc;
      }
    }
    &.text-3 {
      padding-bottom: 40px !important;
    }
  }
}
.wrap {
  position: relative;
  background-color: transparent;
}
body[data-full-width-header="false"] {

  // .layer {
  //   position: absolute;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   z-index: 1;
  //   background-color: transparent;
  //   -webkit-transition: all $transition-time ease-in-out;
  //   -moz-transition: all $transition-time ease-in-out;
  //   -o-transition: all $transition-time ease-in-out;
  //   transition: all $transition-time ease-in-out;
  // }
}
body[data-full-width-header="true"] {
  #slide-out-widget-area {
    transform: translateX(0px) !important;
    -webkit-transform: translateX(0px) !important;
    -o-transform: translateX(0px) !important;
    -ms-transform: translateX(0px) !important;
    -webkit-transition: all $transition-time ease-in-out;
    -moz-transition: all $transition-time ease-in-out;
    -o-transition: all $transition-time ease-in-out;
    transition: all $transition-time ease-in-out;
  }

  // .layer {
  //   position: absolute;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   z-index: 1;
  //   background-color: rgba(0,0,0,.8);
  //   -webkit-transition: all $transition-time ease-in-out;
  //   -moz-transition: all $transition-time ease-in-out;
  //   -o-transition: all $transition-time ease-in-out;
  //   transition: all $transition-time ease-in-out;
  // }
}
.important-slide-close {
  -webkit-transition: all $transition-time ease-in-out;
  -moz-transition: all $transition-time ease-in-out;
  -o-transition: all $transition-time ease-in-out;
  transition: all $transition-time ease-in-out;

  // opacity: 1;
}
.important-slide-opening {
  transform: translateX(-201px) !important;
  -webkit-transform: translateX(-201px) !important;
  -o-transform: translateX(-201px) !important;
  -ms-transform: translateX(-201px) !important;

  // opacity: .3;
  -webkit-transition: all $transition-time ease-in-out;
  -moz-transition: all $transition-time ease-in-out;
  -o-transition: all $transition-time ease-in-out;
  transition: all $transition-time ease-in-out;
}

/** 自定义动画 **/
@keyframes phoneSlideUp {
  from {
    -webkit-transform: translate3d(27px, 80px, 0);
    transform: translate3d(27px, 80px, 0);
    opacity: 0;
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(27px, 0, 0);
    transform: translate3d(27px, 0, 0);
    opacity: 1;
  }
}
.phoneSlideUp {
  -webkit-animation-name: phoneSlideUp;
  animation-name: phoneSlideUp;
}
@-webkit-keyframes down_animation {
  0% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-8px);
    opacity: 1;
  }
}
